vue--子组件调用父组件方法并获取返回值

项目中渲染页面列表,遇到与后台接口联调返回的字段需要翻译,使用的组件是自定义组件Table,类似ElementUI中el-table组件的formatter

首先我们想到的是$emit调用父组件取返回值,this.$emit(方法名, 传参1, 传参2),但是此方法的返回值是vue对象,而不是父组件方法的return值(错误代码就不展示了)

1、尝试曲线救国,使用this.$parent

子组件直接调用父组件方法:

translateFilter(columnsItem,dataItem){
    return this.$parent.translateFilter({
        key:columnsItem.key,
        data:dataItem[columnsItem.key]
    })
},

en...解决了。但是不尽人意,这种方法开发组件对使用者很不友好。

2、this.$emit方法,用回调函数作为参数,父组件里执行该回调函数,返回值后给子组件,然后子组件再接收

<Table @translateFil="translateFilter"></Table>

子组件调用父组件方法,执行回调函数:

translateFil(columnsItem,dataItem){
    let itemName = null;
    this.$emit('translateFilter',{
        key:columnsItem.key,
        data:dataItem[columnsItem.key]
    }, val => { itemName = val })
    return itemName
},
这里注意是es6的写法:
val => { itemName = val }
等价于
function(val){
  itemName = val;
  return itemName
}

父组件定义方法:

translateFilter(obj,callback) {
    let objChild = null;
    if(obj.key == 'headFlag'){
        objChild = this.headFlagData.find(item => item.label == obj.data)
    } else if(obj.key == 'contactGender') {
        objChild = this.sexArray.find(item => item.label == obj.data)
    }
    callback(objChild ? objChild.value : '');  // 执行作为参数的函数
},

3、通过传Function,子组件可获取到父组件的方法。

<Table :translateFil="translateFilter"></Table>

子组件方法:

props: {
    // 子组件接收函数
    translateFil: {
        type: Function
    }
},
translateFilter(columnsItem,dataItem){
    this.translateFil({
        key:columnsItem.key,
        data:dataItem[columnsItem.key]
    })
    return itemName
},

 

posted @ 2020-09-25 17:05  望兰鸟  阅读(12681)  评论(0编辑  收藏  举报